<section>
    <h1 class="blue"><i class="ace-icon fa fa-desktop grey"></i> Extra</h1>

    <div class="hr hr-double hr32"></div>
    <h2 class="blue lighter help-title" data-id="#custom/extra">
        Some Extra Classes
    </h2>

    <div class="space-4"></div>

    <!-- #section:custom/extra -->
    <div class="help-content">
        <h3 class="info-title smaller">Utility Classes</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    A few additional classes have been defined in
                    <code data-open-file="css" class="open-file">assets/css/less/utility.less</code> that may be useful.
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">Font &amp; Color</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Headings:
                    <ul>
                        <li><code>.smaller</code> makes font size smaller</li>
                        <li><code>.bigger</code> makes font weight bigger</li>
                    </ul>
<pre data-language="html">
 <h4 class="bigger">Bigger H4</h4>
</pre>
                </li>

                <li>
                    Font weights:
                    <ul>
                        <li><code>.lighter</code> makes font weight light</li>
                        <li><code>.bolder</code> makes font weight bold</li>
                    </ul>
<pre data-language="html">
 <h3 class="lighter">Lighter Text</h3>
</pre>
                </li>

                <li>
                    Text colors:
                    <ul>
                        <li><code>.dark</code></li>
                        <li><code>.white</code></li>
                        <li><code>.red</code></li>
                        <li><code>.red2</code></li>
                        <li><code>.light-red</code></li>
                        <li><code>.blue</code></li>
                        <li><code>.light-blue</code></li>
                        <li><code>.green</code></li>
                        <li><code>.light-green</code></li>
                        <li><code>.orange</code></li>
                        <li><code>.orange2</code></li>
                        <li><code>.light-orange</code></li>
                        <li><code>.purple</code></li>
                        <li><code>.pink</code></li>
                        <li><code>.pink2</code></li>
                        <li><code>.brown</code></li>
                        <li><code>.grey</code></li>
                        <li><code>.light-grey</code></li>
                    </ul>
				
<pre data-language="html">
 <span class="blue">Blue Text</span>
</pre>
                </li>

                <li>
                    <ul>
                        <li><code>.bigger-110</code></li>
                        <li><code>.bigger-120</code></li>
                        <li>...</li>
                        <li><code>.bigger-290</code></li>
                        <li><code>.bigger-300</code></li>
                        <li>...</li>
                        <li><code>.bigger-125</code></li>
                        <li><code>.bigger-175</code></li>
                        <li><code>.bigger-225</code></li>
                        <li><code>.bigger-275</code></li>
                    </ul>
				
<pre data-language="html">
 <i class="fa fa-twitter blue bigger-150"></i>
</pre>
                </li>

                <li>
                    <ul>
                        <li><code>.smaller-90</code></li>
                        <li><code>.smaller-80</code></li>
                        <li><code>...</code></li>
                        <li><code>.smaller-30</code></li>
                        <li><code>.smaller-20</code></li>
                        <li><code>...</code></li>
                        <li><code>.smaller-75</code></li>
                        <li><code>.smaller-25</code></li>
                    </ul>
<pre data-language="html">
 <span class="smaller-75">Smaller Text</span>
</pre>
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">Layout &amp; Alignment</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    <ul>
                        <li><code>.inline</code> applies <code>display: inline-block</code></li>
                        <li><code>.block</code> applies <code>display: block</code></li>
                    </ul>
                </li>

                <li>
                    <ul>
                        <li><code>.pos-rel</code></li>
                        <li><code>.position-relative</code></li>
                        <li><code>.pos-abs</code></li>
                        <li><code>.position-absolute</code></li>
                    </ul>

                    As an example <code>.inline</code> and <code>.position-relative</code>
                    can be used to add a dropdown inside a <code>DIV</code> element without the need to define a new
                    class:
<pre data-language="html">
<div class="inline pos-rel">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Show Menu</a>
    <ul class="dropdown-menu">
        ...
    </ul>
</div>
</pre>
                </li>

                <li>
                    <ul>
                        <li><code>.center</code></li>
                        <li><code>.align-center</code></li>
                        <li><code>.align-left</code></li>
                        <li><code>.align-right</code></li>
                    </ul>
                </li>

                <li>
                    <ul>
                        <li><code>.middle</code></li>
                        <li><code>.align-middle</code></li>
                        <li><code>.align-top</code></li>
                        <li><code>.align-bottom</code></li>
                    </ul>
                    which applies vertical alignment
                </li>

                <li><code>.no-float</code></li>
            </ul>
        </div>


        <h3 class="info-title smaller">Box Model</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    <ul>
                        <li><code>.no-padding</code></li>
                        <li><code>.no-padding-right</code></li>
                        <li><code>.no-padding-left</code></li>
                        <li><code>.no-padding-top</code></li>
                        <li><code>.no-padding-bottom</code></li>
                    </ul>
                </li>

                <li>
                    <ul>
                        <li><code>.no-margin</code></li>
                        <li><code>.no-margin-right</code></li>
                        <li><code>.no-margin-left</code></li>
                        <li><code>.no-margin-top</code></li>
                        <li><code>.no-margin-bottom</code></li>
                    </ul>
                </li>

                <li>
                    <ul>
                        <li><code>.no-border</code></li>
                        <li><code>.no-border-right</code></li>
                        <li><code>.no-border-left</code></li>
                        <li><code>.no-border-top</code></li>
                        <li><code>.no-border-bottom</code></li>
                    </ul>
                </li>

                <li>
                    <ul>
                        <li><code>.width-100</code></li>
                        <li><code>.width-90</code></li>
                        <li>...</li>
                        <li><code>.width-20</code></li>
                        <li>...</li>
                        <li><code>.width-75</code></li>
                        <li><code>.width-25</code></li>
                        <li>...</li>
                        <li><code>.width-auto</code></li>
                        <li><code>.height-auto</code></li>
                    </ul>
				
<pre data-language="html">
<div class="clearfix">
    <div class="pull-left width-50">
        ...
    </div>

    <div class="pull-right width-50">
        ...
    </div>
</div>
</pre>
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">Space &amp; Separator</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Add <code>.spaced</code> and <code>.spaced2</code> to
                    <code>ul</code> and <code>ol</code> lists for more spacing:
<pre data-language="html">
<ul class="spaced2">
    <li>...</li>
    <li>...</li>
</ul>
</pre>
                </li>

                <li>
                    Space classes to add vertical spacing:
                    <ul>
                        <li><code>.space</code></li>
                        <li><code>.space-0</code></li>
                        <li><code>.space-2</code></li>
                        <li><code>.space-4</code></li>
                        <li>...</li>
                        <li><code>.space-30</code></li>
                        <li><code>.space-32</code></li>
                    </ul>
<pre data-language="html">
<div class="space-12"></div>
</pre>
                </li>

                <li>
                    Spacing that is only visible on specific widths:
                    <ul>
                        <li><code>.vspace-2-xs</code></li>
                        <li><code>.vspace-4-xs</code></li>
                        <li>...</li>
                        <li><code>.vspace-30-xs</code></li>
                        <li><code>.vspace-32-xs</code></li>
                    </ul>

                    <ul>
                        <li><code>.vspace-2-sm</code></li>
                        <li><code>.vspace-4-sm</code></li>
                        <li>...</li>
                    </ul>

                    <ul>
                        <li><code>.vspace-2-md</code></li>
                        <li><code>.vspace-4-md</code></li>
                        <li>...</li>
                    </ul>

                    <ul>
                        <li><code>.vspace-2-lg</code></li>
                        <li><code>.vspace-4-lg</code></li>
                        <li>...</li>
                    </ul>
				
<pre data-language="html">
<div class="vspace-12-xs"></div><!-- will be visibly only on small devices -->
</pre>
                </li>

                <li>
                    <!-- #section:custom/extra.hr -->
                    Horizontal line:
                    <ul>
                        <li><code>.hr</code></li>
                        <li><code>.hr.hr-2</code></li>
                        <li><code>.hr.hr-4</code></li>
                        <li>...</li>
                        <li><code>.hr.hr-30</code></li>
                        <li><code>.hr.hr-32</code></li>
                        <li>...</li>
                        <li><code>.hr.hr-dotted</code></li>
                        <li><code>.hr.hr-double</code></li>
                    </ul>
<pre data-language="html">
<div class="hr hr-12 hr-dotted"></div>
</pre>
                </li>
                <!-- /section:custom/extra.hr -->

            </ul>
        </div>


        <h3 class="info-title smaller">Header</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    <code>.header</code> with same text colors as above:
                    <div class="well">
                        <h3 class="header blue">
                            Header Text
                        </h3>
                    </div>
<pre data-language="html">
<h3 class="header blue lighter smaller">
    Header Text
</h3>
</pre>
                </li>
            </ul>
        </div>


        <h3 class="info-title smaller">Other</h3>

        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    <!-- #section:custom/extra.action-buttons -->
                    <code>.action-buttons</code>:
                    <br/>
				<span class="action-buttons bigger-125">
					<a href="#"><i class="ace-icon fa fa-twitter light-blue"></i></a>
					<a href="#"><i class="ace-icon fa fa-facebook blue"></i></a>
				</span>
                    <br/>
<pre data-language="html">
<span class="action-buttons bigger-125">
  <a href="#"><i class="ace-icon fa fa-twitter light-blue"></i></a>
  <a href="#"><i class="ace-icon fa fa-facebook blue"></i></a>
</span>
</pre>
                    <!-- /section:custom/extra.action-buttons -->
                </li>

                <li>
                    <!-- #section:custom/extra.grid -->
                    <code>.grid2</code> <code>.grid3</code> <code>.grid4</code> elements
                    are less responsive and good for small pieces of content and have a border line separating them:
<pre data-language="html">
<div class="clearfix">
    <div class="grid3"></div>
    <div class="grid3"></div>
    <div class="grid3"></div>
</div>
</pre>
                    <!-- /section:custom/extra.grid -->
                </li>
            </ul>
        </div>

    </div>
    <!-- /section:custom/extra -->

</section>